<template>
    <div style="margin: 0 200px;">
        <div class="title">
            {{ this.carousel.name }}
        </div>
        <div class="desc">
            
            <div><img :src="this.carousel.cover"/></div>
            <div class="text" ref="text">{{ this.carousel.introduction }}</div>
            
        </div>
      
    </div>
  </template>
  
  <script>
  import {getCarousel} from '@/api/carousel/carousel.js';
  export default {
    name: 'carsousel',
    components: {

    },
    data(){
        return{
            carousel:{
                name: "",
                introduction:"",
                cover:"",
                created:"",
            },
           
        }
    },
    methods:{
        
        getData(){
            console.log(this.query);
            getCarousel(this.query).then((res) => {
                // console.log('数据:',res.data);
                this.carousel = res.data;
                // console.log('轮播图',this.carousel)
                this.$refs.text.innerHTML = this.carousel.introduction;
            });
        },

    },
    //页面加载
    mounted(){
        this.query = this.$route.query.id;
        // console.log(this.query);
        this.getData();
    },
    // destroyed(){
    //     this.carousel = {};
    // }
  }
  </script>
  
  <style lang="less" scoped>
  .title{
    font-size: 20px;
    font-weight: bold;
  }
  .desc img{
    width: 500px;
    height: 400px;
  }
  </style>